<template>
  <div class="namelist-box">
    <div style="margin-bottom: 16px">
      <a-button type="primary" @click="changeUser('add')">
        添加用户
      </a-button>
    </div>
    <a-table :columns="columns" :data-source="data" :loading="tableLoading" :pagination="false">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <span class="table-operation">
            <a-button type="link" @click="changeUser(record)">修改密码</a-button>
            <a-button type="link" danger @click="delUser(record.key)">删除帐户</a-button>
          </span>
        </template>
      </template>
    </a-table>
    <a-modal v-model:open="showAction" :title="userItem ? '修改密码' : ' 添加用户'" @cancel="handleCancel(true)"
      :maskClosable="false">
      <a-form :model="form" name="basic" class="login-form" autocomplete="off" @finish="handleSubmit">
        <a-form-item label="帐号" name="username" :rules="[{ required: true, message: '请输入您的帐号' }]">
          <a-input v-model:value="form.username" :disabled="!!userItem" />
        </a-form-item>
        <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入您的密码' }]">
          <a-input-password v-model:value="form.password" />
        </a-form-item>
        <a-button type="primary" html-type="submit" :loading="loading">提交</a-button>
      </a-form>
      <template #footer>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as Api from "@req/api";
import { suc } from "../../utils";
import { Modal, message } from "ant-design-vue";
const columns = [
  {
    title: "用户名",
    dataIndex: "username",
    width: 500
  },
  { title: "操作", dataIndex: "action", key: "action" },
];

const data = ref([]);
const loading = ref(false);
const tableLoading = ref(false);
const showAction = ref(false);
const userItem = ref(null)
const form = ref({
  username: null,
  password: null,
});

const handleCancel = () => {
  showAction.value = false;
  userItem.value = null;
  form.value = {
    username: null,
    password: null,
  }
}

onMounted(() => {
  getUserList()
});

const getUserList = () => {
  tableLoading.value = true;
  Api.getUserList().then((res) => {
    if (suc(res.status)) {
      res.data.users.map((v) => (v.key = v.id));
      data.value = res.data.users;
    }
    tableLoading.value = false;
  });
}

const changeUser = (item) => {
  if (item != 'add') {
    userItem.value = item;
    form.value.username = item.username;
    form.value.user_id = item.id;
  }
  showAction.value = true;
}
const delUser = (id) => {

  Modal.confirm({
    title: "确认删除吗？",
    content: "删除后不可恢复，需重新添加",
    okText: "确认",
    cancelText: "取消",
    onOk() {
      Api.delUser(id).then((res) => {
        if (suc(res.status)) {
          message.success(res.message)
          getUserList()
        }
      })
    },
  });
}

const handleSubmit = () => {
  loading.value = true;
  if (userItem.value) {
    changePwd()
  } else {
    submit()
  }
}

const submit = () => {
  Api.addUser(form.value).then((res) => {
    loading.value = false;
    if (suc(res.status)) {
      message.success(res.message)
      handleCancel()
      getUserList()
    }
  })
}

const changePwd = () => {
  Api.changeUser(userItem.value.id, form.value).then((res) => {
    loading.value = false;
    if (suc(res.status)) {
      message.success(res.message)
      handleCancel()
      getUserList()
    }
  })
}

</script>

<style lang="postcss" scoped>
.namelist-box {
  padding: 16px;
}

.login-form {
  padding: 30px 30px 0;

  .ant-btn {
    display: block;
    margin-left: auto;
  }
}
</style>